import { useState } from "react"
import about from "./styles/about.module.css"
import TopNavict from "../compoments/TopNavict"
import BottomBavict from "../compoments/bottomnav"
import classNames from "classnames"
import Profile from "../compoments/ltdProfile"
import Contact from "../compoments/contact"
import Concept from "../compoments/concept"
import BrandCulture from "../compoments/brandCulture"

const ltd_info = [
    {
        id:1,
        title:"企业概况",
    },{
        id:2,
        title:"联系我们",
    },{
        id:3,
        title:"产品理念",
    },{
        id:4,
        title:"品牌文化",
    },
]


const About = () => {
    const [currentId,setCurrentId] = useState(1)
    const choice = (id) =>{
        setCurrentId(id)
    }
    return (
        <div className={about.app}>
            <div><TopNavict/></div>
            <div className={about.line}></div>
            <div className={about.art}>
                <div className={about.art_left}>
                    {
                        currentId ===  1 ? <Profile/> : currentId ===  2 ? <Contact/> : currentId ===  3 ? <Concept/> : <BrandCulture/>
                    }
                </div>
                <div className={about.art_right}>
                    <div className={about.art_menu}>
                        <div className={about.menu_head}>发现频道</div>
                        {
                            ltd_info.map((item)=>{
                                return(
                                    <div key={item.id} className={classNames(about.menu_text,{[about.menu_text_active]:item.id===currentId})} onClick={()=>{choice(item.id)}}>{item.title}</div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
            <div>
                <BottomBavict />
            </div>
        </div>
    )
}

export default About